<template>
    <div class="common_user">

        <el-table :data="user_list">
            <el-table-column label="头像" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">

                        <el-avatar icon="el-icon-user-solid" size="default" shape="circle"
                            :src="base_url + scope.row.avatar" fit="fill"></el-avatar>

                    </div>
                </template>
            </el-table-column>
            <el-table-column label="名字" width="180">
                <template #default="scope">
                    <el-tag>{{ scope.row.username }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="密码" width="180">
                <template #default="scope">
                    <el-tag>{{ scope.row.cryptogram }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="管理员" width="180">
                <template #default="scope">
                    <el-tag :type="scope.row.role === '0' ? 'danger' : 'success'">{{ scope.row.role === '0' ? "管理员" :
                        "普通用户"
                        }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-popconfirm title="确定删除吗？" cancel-button-text="取消" confirm-button-text="确认"
                        @confirm="deletes(scope.row._id)">
                        <template #reference>
                            <el-button size="small" type="danger">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination v-model:current-page="currentPage" @current-change="handleCurrentChange"
                layout="prev, pager, next" :total="count" :page-size="5" background />
        </div>
        <el-dialog v-model="dialogFormVisible" title="编辑" width="500">
            <el-form :model="form">
                <el-form-item label="用户名" label-width="80px">
                    <el-input v-model="form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" label-width="80px">
                    <el-input v-model="form.cryptogram" autocomplete="off" />
                </el-form-item>
                <el-form-item label="管理员" label-width="80px">
                    <el-radio-group v-model="form.role">
                        <el-radio border value="0">管理员</el-radio>
                        <el-radio border value="1">普通用户</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="to_edit_concel">取消</el-button>
                <el-button type="primary" @click="to_edit">修改</el-button>

            </template>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import CommonStore from "@/store/CommonStore"
import { reactive, onMounted, ref } from "vue";
import { user_info } from "@/types/CommonUser"
import { type User } from "@/types/CommonUser"
import { ElMessage } from "element-plus";
const base_url = import.meta.env.VITE_APP_URL
const dialogFormVisible = ref(false)
const currentPage = ref(1)
const store = CommonStore()
const user_list = ref<user_info[]>([])
const count = ref<number>(100)
const form = reactive({
    _id: '',
    username: "",
    cryptogram: "",
    role: "1"
})
onMounted(() => {
    getuserlist()
    console.log("执行")
})

const handleEdit = (index: number, row: User) => {
    console.log(index, row)
    dialogFormVisible.value = true
    Object.assign(form, {
        _id: row._id,
        username: row.username,
        cryptogram: row.cryptogram
    })
}



const getuserlist = async () => {
    const result: any = await store.get_user_list(0)
    console.log(result)
    count.value = result.count
    user_list.value = result.data

}
const to_edit = async () => {
    if (form.cryptogram.trim().length < 6) {
        ElMessage({
            type: "warning",
            message: "密码最小为6"
        })
        return
    }
    //提交保存
    try {
        await store.common_user_update(form)
        Object.assign(form, {
            _id: "",
            username: "",
            cryptogram: ""

        })
        dialogFormVisible.value = false
        const result: any = await store.get_user_list(currentPage.value * 5 - 5)
        user_list.value = result.data
    } catch (error) {

    }
}
const to_edit_concel = () => {
    Object.assign(form, {
        _id: "",
        username: "",
        cryptogram: ""
    })
    dialogFormVisible.value = false
}
//切换页面
const handleCurrentChange = async (e: number) => {

    const result: any = await store.get_user_list(e * 5 - 5)

    count.value = result.count
    user_list.value = result.data
}
//删除用户
const deletes = async (_id: string) => {
    try {


        await store.common_user_delete(_id)
        if (user_list.value.length === 1) {
            currentPage.value = currentPage.value - 1
        }
        const result: any = await store.get_user_list(currentPage.value * 5 - 5)
        console.log(result)
        count.value = result.count
        user_list.value = result.data
    } catch (error) {

    }
}
</script>

<style lang="scss" scoped>
.common_user {
    width: 100%;

    .page {
        margin-top: 2vw;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}
</style>